import React, { useState,useEffect } from "react";
import { Button } from "antd";

/**
 * 自定义Hook
 *  作用：提取封装一些公共的处理逻辑
 *  玩法：创建一个函数，名字需要是useXxx,后期就可以在组件中调用这个方法！
 */
const usePartialState = (initialValue)=>{
    let [state,setState] = useState(initialValue);
    //setState:不支持部分状态更改的
    //setPartial:我们期望这个方法可以支持部分状态的更改  
    const setPartial = (partialValue)=>{
        setState({
            ...state,
            ...partialValue
        })
    }
    return [state,setPartial]
}

/**
 * 自定义Hook，在组件第一次渲染完毕后，统一干点啥事
 */
const useDidMount = (title)=>{
    if(!title) title = 'I love 王一凡';
    //基于react内置的hook函数，实现需求即可
    useEffect(()=>{
        document.title = title
    },[])
}

export default function Demo() {
    let [state, setPartial] = usePartialState({
        sup: 0,
        opp: 0
    });
    useDidMount('I is handsome');
    const handler = (value) => {
        if (value === 'sup') {
            setPartial({
                // ...state,
                sup: state.sup + 1
            })
            return;
        }
        setPartial({
            // ...state,
            opp: state.opp + 1
        })
    }
    return <div className="vote-box">
        <div className="main">
            <p>支持人数:{state.sup}</p>
            <p>反对人数:{state.opp}</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={handler.bind(null, 'sup')}>支持</Button>
            <Button type="primary" danger onClick={handler.bind(null, 'opp')}>反对</Button>
        </div>
    </div>
}